<template>
  <div id="dish-taste">
    <Search :nowView='whichView' @searchWhat='search'></Search>
    <div class="table-box">
      <el-container>
        <el-header class="table-title" height="40px">
          <el-row>
            <el-col :span="21">Banner列表</el-col>
            <el-col :span="3">
              <el-button
                class="btn-size"
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="dialogFormVisible_add = true"
                >新增</el-button
              >
              
            </el-col>
          </el-row>
        </el-header>
        <el-main class="table-content">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
    
          >
           
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">{{(nowPage-1)*pageCount+scope.$index+1}}</template>
            </el-table-column>
            <el-table-column label="图片" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.image" class="imgSize" />
              </template>
            </el-table-column>
            <el-table-column
              prop="bannerName"
              label="banner名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="url"
              label="链接"
              align="center"
            ></el-table-column>
            <el-table-column label="上下架" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                  :disabled="true"
                ></el-switch>
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="排序"
              prop="sort"
              align="center"
            ></el-table-column> -->
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="
                    handleEdit(scope.$index, scope.row);
                    dialogFormVisible_edit = true;
                  "
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 新增 -->
          <el-dialog
            title="Banner设置"
            :visible.sync="dialogFormVisible_add"
            width="500px"
          >
            <el-form :model="addForm" :rules="rules" ref='addForm'>
              <el-form-item label="名称" prop='bannerName'>
                <el-input
                  v-model="addForm.bannerName"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="图片" prop='image'>
                <el-upload
                  class="avatar-uploader"
                  action="http://49.235.240.193:8080/admin/upload/image"
                  name="image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="addForm.image"
                    :src="addForm.image"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="链接" prop='url'>
                <el-input
                  v-model="addForm.url"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="上下架">
                <el-switch
                  v-model="addForm.state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                  
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="序号" prop='id'>
                <el-input
                  v-model="addForm.id"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible_add = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                  
                  
                  submitForm('addForm')
                "
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <!--编辑 -->
          <el-dialog
            title="Banner设置"
            :visible.sync="dialogFormVisible_edit"
            width="500px"
          >
            <el-form :model="editForm">
              <el-form-item label="名称">
                <el-input
                  v-model="editForm.bannerName"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="图片">
                <el-upload
                  class="avatar-uploader"
                  action="http://49.235.240.193:8080/admin/upload/image"
                  name="image"
                  :show-file-list="false"
                  :on-success="editHandleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="editForm.image"
                    :src="editForm.image"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="链接">
                <el-input
                  v-model="editForm.url"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="上下架">
                <el-switch
                  v-model="editForm.state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
              <!-- <el-form-item label="排序">
                <el-input
                  v-model="editForm.sort"
                  autocomplete="off"
                  style="width: 180px"
                ></el-input>
              </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible_edit = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                  dialogFormVisible_edit = false;
                  editCouponType();
                "
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </el-main>
        <Pagination @shareData="shareData" :totalCount="count" ref='toNumOne'></Pagination>
      </el-container>
    </div>
    
  </div>
</template>

<script>
import Pagination from "../../components/common/Pagination.vue";
import Search from "../../components/tang/search.vue";
export default {
  components: {
    Search,
    Pagination,
  },
  data() {
    return {
      rules:{
        bannerName:[
          { required: true, message: '请输入菜品名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        image:[
          {required:true,message:'请上传图片',trigger:'change'}
        ],
        url:[
          {required:true,message:'请输入链接',trigger:'blur'}
        ],
        id:[
          { required: true, message: '请输入序号', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]
      },
      searchInfo:'',
      whichView:'请输入banner名称',
      tableData: [],
      pageCount: 5,
      nowPage: 1,
      count: 0,
      multipleSelection: [],
      show: true,
      dialogFormVisible_add: false,
      dialogFormVisible_edit: false,
      addForm: {
        bannerName: "",
        image: "",
        state: "",
        // sort: "",
        url: "",
        position: 0,
        id: "",
      },
      editForm: {
        bannerName: "",
        image: "",
        state: "",
        // sort: "",
        url: "",
        position: 0,
        id: "",
      },
    };
  },
  methods: {
     // 搜索
    search(obj){
      console.log(obj);
      this.searchInfo=obj;
      console.log(this.searchInfo)
      this.$refs.toNumOne.toOne()
      this.nowPage=1

      this.getInfo()
    },
    // 分页
    shareData(v) {
      console.log(v);
      this.pageCount = v.pageCount;
      this.nowPage = v.nowPage;
      // console.log(this.pageCount)
      this.getInfo();
    },
    // 获取所有数据列表
    getInfo() {
  
      this.axios({
        method: "post",
        url: "/banner/list",
        data: {
          bannerName: this.searchInfo,
          page: this.nowPage,
          pageSize: this.pageCount,
          position: 0,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.count = res.data.data.count;
          this.tableData = [];
          for (let i = 0; i < res.data.data.list.length; i++) {
            this.tableData.push(res.data.data.list[i]);
          }
          // console.log(this.tableData)
        }
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    test(index, row) {
      console.log(row.state);
    },
    // 增删改查
    handleEdit(index, row) {
      console.log(index, row);
      this.editForm={
        bannerName:row.bannerName,
        image:row.image,
        state:row.state,
        url:row.url,
        position:row.position,
        id:row.id
      }
    },
    handleDelete(index, row) {
      console.log(index, row);
      // row.splice(index, 1);
      this.axios({
        method:'get',
        url:'/banner/delete/'+row.id
      }).then((res)=>{
        console.log(res)
        if(res.data.code==200){
          this.getInfo()
        }
      })

    },
    // 新增中上传方法
    handleAvatarSuccess(res, file) {
      // console.log(res,file)
      this.addForm.image = res.data;
      // console.log(this.imageUrl)
    },
    // 编辑中上传
    editHandleAvatarSuccess(res, file) {
      // console.log(res,file)
      this.editForm.image = res.data;
      // console.log(this.imageUrl)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 验证表单
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addCouponType()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    // 增加广告
    addCouponType() {
      console.log(this.addForm);
      this.axios({
        method: "post",
        url: "/banner/add",
        data: this.addForm,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.addForm = {
            bannerName: "",
            image: "",
            state: "",
            // sort: "",
            url: "",
            position: 0,
            id: "",
          };
         console.log(this.addForm)
          
          this.getInfo()
          this.dialogFormVisible_add = false;
        }
      });
    },
    // 编辑广告
    editCouponType(){
      console.log(this.editForm)
      this.axios({
        method:'post',
        url:'/banner/update',
        data:this.editForm
      }).then((res)=>{
        console.log(res)
        if(res.data.code==200){
          this.getInfo()
        }
      })
    }
  },
  created() {
    this.getInfo();
  },
};
</script>

<style lang='less' scoped>
.table-title {
  margin: 1rem;
  background-color: #f5f9fc;
  box-sizing: border-box;
  height: 4rem;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
}
.table-box {
  margin-top: 1.5rem;
  border: 0.1rem solid #dbe0e9;
  background-color: #fff;
}
.btn-size {
  height: 3rem;
  padding: 0.6rem 2rem;
}
.table-content {
  background-color: #f5f9fc;
  box-sizing: border-box;
  margin: 0 1rem 1rem 1rem;
  padding: 1rem;
}
.imgSize {
  height: 60px;
  width: 60px;
}
// 上传头像样式
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
}
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>